<template>
	<view class="cart-container">
		<view class="cart-header">
			<view class="number">
				总数量: {{number}}
			</view>
			<view class="edit" @tap="switchEditState">
				{{editState?'完成':'编辑'}}
			</view>
		</view>
		<scroll-view class="items" scroll-y="true" >
			<view class="items-wrap">
				<view class="item" v-for="item in items" :key="item.goodsId">
					<c-check-box 
						:size="18" 
						:icon-size="14" 
						v-model="item.selected"
						@change="changeItemSelectState(item.key, item.selected)"
					></c-check-box>
					<image :src="item.pic" mode="scaleToFill"></image>
					<view class="item-info">
						<view class="item-name">{{item.name}}</view>
						<view class="price">
							<text>￥{{(item.price*item.number).toFixed(2)}}</text>
							<uni-number-box
								:min="1" v-model="item.number"
								@change="changeItemNum(item.key, item.number)"
							></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="action-bar">
			<view class="action-left">
				全选:
				<c-check-box v-model="allChecked"></c-check-box>
			</view>
			<view class="action-right" v-show="!editState">
				<view class="total">
					总价格:￥{{price}}
				</view>
				<button type="warn">确定</button>
			</view>
			<button type="warn" v-show="editState" @click="delItem">删除</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
				items: [],
				price: 0, // 总价格
				number: 0 ,// 总数量
				editState: false
			}
		},
		methods: {
			delItem(){
				// 删除商品
				// 得到所有选中的商品
				const selectedItems = this.items.filter(item=> item.selected);
				const selectedKeys = [];
				selectedItems.forEach(item => {
					selectedKeys.push(item.key)
				})
				this.$request('/shopping-cart/remove', {
					method:'POST',
					data: {
						key: selectedKeys.join(',')
					}
				}).then(res => {
					if (res.code === 700) {
						this.items = [];
						this.price = 0;
						this.number = 0;
					}
					if (res.code === 0) {
						this.items = res.data.items;
						this.price = res.data.price;
						this.number = res.data.number;
					}
				})
			},
			// 改变购物车商品选中状态
			changeItemSelectState(key, selected){
				this.$request('/shopping-cart/select', {
					method:'POST',
					data: {
						key,
						selected
					}
				}).then(res => {
					if (res.code === 0) {
						this.items = res.data.items;
						this.price = res.data.price;
						this.number = res.data.number;
					}
				})
			},
			// 改变购物车商品购买数量
			changeItemNum(key, number){
				this.$request('/shopping-cart/modifyNumber', {
					method: 'POST',
					data: {
						key,
						number
					}
				}).then(res => {
					if (res.code === 0) {
						this.items = res.data.items;
						this.price = res.data.price;
						this.number = res.data.number;
					}
				})
			},
			switchEditState(){
				this.editState = !this.editState;
				this.items.forEach(item => {
					item.selected = !this.editState
				})
			},
			fetchCartInfo(){
				this.$request('/shopping-cart/info').then(res => {
					if (res.code === 0) {
						this.items = res.data.items;
						this.price = res.data.price;
						this.number = res.data.number;
					}
				})
			}
		},
		onShow(){
			this.$checkLogin();
			this.fetchCartInfo();
		},
		computed: {
			allChecked: {
				get(){
					return this.items.every(item => item.selected)
				},
				set(val) {
					// 获取所有商品的key
					const keys = [];
					this.items.forEach(item => {
						keys.push(item.key)
					})
					this.changeItemSelectState(keys.join(','), val)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.cart-container {
	
	.cart-header{
		width: 100%;
		height: 40px;
		background-color: #f1f1f1;
		position: fixed;
		left: 0;
		top: 0;
		font-size: 14px;
		color: #333;
		box-sizing: border-box;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.items{
		position: fixed;
		left: 0;
		right: 0;
		top:40px;
		bottom: 46px;
		.item{
			padding: 0 10px;
			background-color: #fafafa;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			image{
				width: 160rpx;
				height: 160rpx;
				flex-shrink: 0;
			}
			
			margin-top: 5px;
			.item-info{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height:  160rpx;

				.item-name{
					width: 450rpx;
					font-size:14px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.price{
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
	.action-bar{
		position: fixed;
		left: 0;
		right: 0;
		height: 46px;
		bottom: 0;
		background-color: #f1f1f1;
		display: flex;
		font-size: 12px;
		padding: 0 15px;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		.action-left{
			height: 46px;
			display: flex;
			align-items: center;
		}
		.action-right{
			display: flex;
			align-items: center;
		}
		
	}
}
</style>
